<template>
    <div class="container">
        <progress :percent="percent" activeColor="#EA5A49" />
        <p>{{year}}已经过去了{{day}}天,{{percent}}%</p>
    </div>
</template>

<script>
export default {
  data () {
    return {
    //   year: 2012
    }
  },
  methods: {
    isLeapYear () {
      const year = new Date().getFullYear()
      if (year % 400 === 0) {
        return true
      } else if (year % 4 === 0 && year % 100 !== 0) {
        return true
      } else {
        return false
      }
    },
    getDayOfYead () {
      return this.isLeapYear() ? 366 : 365
    }
  },
  computed: {
    year () {
      return new Date().getFullYear()
    },
    day () {
      let start = new Date()
      start.setMonth(0)
      start.setDate(1)
      let offset = new Date().getTime() - start.getTime()
      return parseInt(offset / 1000 / 60 / 60 / 24) + 1
    },
    percent () {
      return (this.day * 100 / this.getDayOfYead()).toFixed(1)
    }
  }
}
</script>


<style lang="scss" scoped>
    .container{
        width: 100%;
        progress{
            margin-bottom: 10px
        }
    }
</style>

